<template>
  <div>
    <div class="recommend-title">周末去哪儿</div>
    <ul>
      <li class="item border-bottom" v-for="item of recommendList" :key="item.id">
        <div class="item-img-wapper">
          <img class="item-img" :src="item.imgurl" />
        </div>
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "HomeWeekend",
    data(){
      return{
        recommendList:[{
          id:"0001",
          imgurl:"http://img1.qunarzz.com/sight/source/1505/74/98a840f2a881b.jpg_r_640x214_1bf94c8e.jpg",
          title:"华清宫",
          desc:"探寻杨贵妃御汤遗址"
        },
          {
            id:"0002",
            imgurl:"http://img1.qunarzz.com/sight/source/1505/19/58f233e11df7ef.jpg_r_640x214_6b42c9fc.jpg",
            title:"华清宫",
            desc:"探寻杨贵妃御汤遗址"
          },
          {
            id:"0003",
            imgurl:"http://img1.qunarzz.com/sight/source/1811/63/808c022b285a2c.jpg_r_640x214_ad984479.jpg",
            title:"华清宫",
            desc:"探寻杨贵妃御汤遗址"
          }]
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "~css/mixins.styl"
  .recommend-title
    margin-top :.2rem
    line-height :.8rem
    background :#eee
    text-indent:.2rem

  .item-img-wapper
    overflow :hidden
    height:0
    padding-bottom :37.09%
    .item-img
      width:100%
  .item-info
    padding :.1rem
    min-width :0
    .item-title
      line-height:.54rem
      font-size :.32rem
      ellipsis()
    .item-desc
      line-height :.4rem
      color:#ccc
      ellipsis()
</style>
